<script setup lang="ts">
import SectionCard from "@/components/app/section-card.vue";
import { hci } from "@/components/framework/icon";
import { hc } from "@/framework/vue/util/render.ts";
import { CopyOutlined, SettingOutlined } from "@ant-design/icons-vue";
import EnvVarSetOperation from "@/modules/dev-env/components/env-var-set-operation.vue";
import { ref } from "vue";
import FolderPickerInput from "@/components/framework/folder-picker-input.vue";
import { openSystemPropertiesAdvanced } from "@/util/system-utils.ts";
import { copyText } from "@/util/clipboard.ts";

const androidHome = ref(native.process.env.ANDROID_HOME || "");
const currentAndroidHome = ref(native.process.env.ANDROID_HOME);

const pathVariables = [
  "%ANDROID_HOME%\\platform-tools",
  "%ANDROID_HOME%\\cmdline-tools\\latest\\bin",
  // ...
];
</script>

<template>
  <section-card :icon="hci('icon-gradle')" title="安卓环境设置">
    <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }" class="pv-20">
      <a-form-item label="ANDROID_HOME" help="AndroidSdk根目录">
        <div class="flex aic col-gap-10">
          <folder-picker-input v-model:value="androidHome" class="flex-1" />
          <env-var-set-operation name="ANDROID_HOME" :value="androidHome" />
          <a-button :icon="hc(CopyOutlined)" @click="copyText('ANDROID_HOME')">变量名</a-button>
          <a-button :icon="hc(CopyOutlined)" @click="androidHome && copyText(androidHome)">变量值</a-button>
        </div>
        <template #extra>
          <span>当前值：{{ currentAndroidHome }}</span>
        </template>
      </a-form-item>

      <a-divider orientation="left">
        <span class="color-text-secondary font-14">系统Path变量</span>
      </a-divider>
      <template v-for="(it, i) in pathVariables" :key="'s' + i">
        <a-form-item :label="`Path${i}`">
          <div class="flex aic col-gap-10">
            <a-input :value="it" readonly />
            <a-button :icon="hc(CopyOutlined)" @click="copyText(it)">变量值</a-button>
          </div>
        </a-form-item>
      </template>

      <a-form-item :wrapper-col="{ offset: 5 }">
        <a-button @click="openSystemPropertiesAdvanced" :icon="hc(SettingOutlined)">系统属性环境变量</a-button>
      </a-form-item>
    </a-form>
  </section-card>
</template>

<style scoped lang="less"></style>
